<template>
    <div class="active">
        

          <div class="text">
            用户激活
          </div>        
          <el-form  :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="账号" prop="account">
                <el-input v-model="ruleForm.account"></el-input>
              </el-form-item>
            <el-form-item label="密码" prop="pass">
              <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="checkPass">
              <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="用户状态" prop="status">
                <el-select v-model="ruleForm.status" placeholder="请选择" style=" width: 400px;">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="activeUser()">提交</el-button>
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>
    </div>
</template>

<style scoped>

    .demo-ruleForm{
        width: 500px;
    }
    .active{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .text{
        font-size: 30px;
        margin: 50px 0 30px 0;
    }
</style>

<script>
import { baseurl } from '@/param';

export default {
    name:'ActiveViewe',
    data() {
        var pattern =/^[A-Za-z0-9]{6,12}$/
        var checkAccount = (rule, value, callback) => {
        if (!pattern.test(value)) {

          return callback(new Error('账号必须是6-12位的数字和大小写字母'));
        }
       
      };
      var validatePass = (rule, value, callback) => {
        if (!pattern.test(value)) {
            return callback(new Error('密码必须是6-12位的数字和大小写字母'));
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.pass) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        options: [{
            value: '31',
          label: '常住业主'
        }, {
          value: '32',
          label: '租户'
        }],
        ruleForm: {
          pass: '',
          checkPass: '',
          account: '',
          status:''
        },
        rules: {
          pass: [
            { validator: validatePass, trigger: 'blur' }
          ],
          checkPass: [
            { validator: validatePass2, trigger: 'blur' }
          ],
          account: [
            { validator: checkAccount, trigger: 'blur' }
          ]
        }
      };
    },
   
    
  
      methods: {
    
        
    activeUser(){

        axios.put(`${baseurl}/user/update/byId`,{
            userid:JSON.parse(sessionStorage.getItem('userInfo')).userid,
            user_status:this.ruleForm.status,
            account:this.ruleForm.account,
            password:this.ruleForm.password,
        },{
                 
        headers:{
          'Authorization':sessionStorage.getItem('Authorization')
          } 
        }).then(res=>{
          if(res.data.code){
            alert("账号密码修改，需重新登录")
            sessionStorage.clear()
            this.$router.push("/")
            
          }else{
            alert(res.data.message)
           
          }
          this.resetForm()
        }).catch(err=>console.log(err.message))

    },
    resetForm(formName) {
    this.$refs[formName].resetFields();
    }
    }
}
</script>


